<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2-1-2-form</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<h4>
	<ol>
		<li>form中label必须添加，以此适应bootstrap识别input元素，如不需要添加可加类名:sr-only 隐藏</li>
		<li>在input上加class="form-control"  为添加圆角效果</li>
	</ol>
</h4>
<br>

	<form class="" role='form'>
		<input type="text" class="forrm-control">
		<textarea class="form-control"  rows="2">Hello</textarea>

		<div class="checkbox">
			<label>
				<input type="checkbox"  value="">篮球
			</label>
		</div>

		<div class="checkbox">
			<label>
				<input type="checkbox"  value="">羽毛球
			</label>
		</div>

		<div class="radio">
			<label>
				<input name="sex" type="radio" checked>男
			</label>
		</div>

		<div class="radio">
			<label>
				<input name="sex"  type="radio" >女
			</label>
		</div>
		
		<div class="col-sm-1 col-sm-offset-2">
			<!-- multiple   为全部展示选择列表 -->
			<select class="form-control" >
				<option >1</option>
				<option >2</option>
				<option >3</option>
				<option >4</option>
			</select>
		</div>


		<!-- 静态控件  这里是p文本类型 -->
		<p class="form-contarol">格式输入：hello.@163.com</p>
		<!-- disabled-----禁用     readonly-----只读
					单行禁用加disabled  多行禁用时：  
					<fieldest></fieldest>,把文本设置在其中，并把fielset添加类名disabled
		-->
		<input type="text" class="form-control" placeholder="hello" disabled>

	</form>

<br><hr>


<h3>表单的校验状态  加载运用图标</h3>
	<form role="form"> 
		<div class="form-group has-warning has-feedback">
				<label>用户ing</label>
				<input type="text" class="form-control">
				<span class="glyphicon glyphicon-ok form-control-feedback"></span>
		</div>

		<div class="form-group has-success">
			<label >用户ing</label>
			<input type="text" ><!-- 这里的input省略了class="form-control" 而这个类名的作用是占满整行 -->
			<span class="glyphicon glyphicon-time " ></span>
		</div>

		<div class="form-group has-error has-feedback col-sm-3">
			<label >用户ing</label>
			<input type="text" class="form-control" style="margin-left:15px">
			<span class="glyphicon glyphicon-bookmark form-control-feedback"  ></span>
		</div>


	</form>





<br><br><br><br><br>
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>